<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="include/head::commonHeaderList('ET问题人员列表')">

</head>
<body>
<div id="content" class="col-lg-12 col-sm-12">
    <div class="row">
        <div class="box col-md-12" style="padding: 0;margin-top: 5px;">
            <div class="box-inner">
                <div class="box-header well" data-original-title="">
                    <h2>
                        <i class="glyphicon glyphicon-list"></i> <span th:text="${param.loginName}"></span>ET问题人员列表
                    </h2>
                    <div class="box-icon">
                        <a href="javascript:void(0);" id="smaller" class="btn btn-minimize btn-round btn-default"><i class="glyphicon glyphicon-chevron-up"></i></a>
                    </div>
                </div>
                <div class="box-content">
                    <form class="form-inline form-search " role="form" th:action="@{/et/monitor/list}">
                        <div class="input-group input-group-sm">
                            <input type="search" name="searchKey" id="search" class="form-control" th:value="${searchKey}" onkeyup="if(event.keyCode==13){clickSearch();}" placeholder="查询关键字..." style="width:200px;margin-bottom: 0 !important;">
                            <span class="input-group-btn">
                                        <button class="btn btn-info btn-sm" type="submit"> 查 询</button>
                                    </span>
                        </div>
                        <button id="add" href="javascript:" class="btn btn-primary btn-sm " type="button" role="button" > <span class="glyphicon glyphicon-plus-sign"></span> 添 加  </button>&nbsp;&nbsp;&nbsp;&nbsp;

                    </form>
                    <table class="table table-striped table-bordered table-hover footable" data-show-toggle="false">
                        <thead>
                        <tr>
                            <th class="text-center">序号</th>
                            <th class="text-center">学员账号</th>
                            <th class="text-center">学员手机号</th>
                            <th class="text-center">问题内容</th>
                            <th class="text-center" >当前状态</th>
                            <th class="text-center" data-breakpoints="xs">添加人</th>
                            <th class="text-center" data-breakpoints="xs">添加时间</th>
                            <th class="text-center" data-breakpoints="xs">修改人</th>
                            <th class="text-center" data-breakpoints="xs">修改日期</th>
                            <th class="text-center">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="item,itemStat:${pageInfo.list}">
                            <td class="text-center" th:utext="${itemStat.index+1}"></td>
                            <td class="text-center" th:text="${item.studentLogin}"></td>
                            <td class="text-center" th:text="${item.phone}"></td>
                            <td class="text-center" th:text="${item.content}"></td>
                            <td class="text-center" th:switch="${item.state}">
                                <span th:case="0" class="label label-default">停止提醒</span>
                                <span th:case="1" class="label label-success">提醒中</span>
                            </td>
                            <td class="text-center" th:text="${item.creator}"></td>
                            <td class="text-center" th:text="${#dates.format(item.createTime,'yyyy/MM/dd H:m:s')}"></td>
                            <td class="text-center" th:text="${item.updater}"></td>
                            <td class="text-center" th:text="${#dates.format(item.updateTime,'yyyy/MM/dd H:m:s')}"></td>
                            <td>
                                <button class="btn btn-info btn-xs" th:onclick="|editContent(${item.personId})|" style="margin-bottom:3px;"> <i class="glyphicon glyphicon-edit icon-white"></i> 修改提醒问题 </button>
                                <button th:if="${item.state==1}" class="btn btn-warning btn-xs" style="margin-bottom:3px;" th:onclick="|changeState(${item.personId},0)|"><i class="glyphicon glyphicon-edit icon-white"></i> 停止提醒 </button>
                                <button th:if="${item.state==0}" class="btn btn-success btn-xs" style="margin-bottom:3px;" th:onclick="|changeState(${item.personId},1)|"><i class="glyphicon glyphicon-edit icon-white"></i> 启用提醒 </button>
                                <button class="btn btn-danger btn-xs" th:onclick="|delRecord(${item.personId})|"  style="margin-bottom:3px;"> <i class="glyphicon glyphicon-edit icon-white"></i> 删除 </button>
                            </td>
                        </tr>
                        </tbody>

                    </table>
                    <div th:include="include/pageinfo::pager"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:include="include/onload_js::onloadJSCustomList(~{::script})">
    <script>
        $(function() {
            $('.footable').footable();
            $("#add").click(function(){
                layer.open({
                    type: 2,
                    title: false,
                    closeBtn: 1, //显示关闭按钮
                    shade: [0],
                    area: ['500px', '250px'],
                    //offset: 'rb', //右下角弹出
                    // time: 2000, //2秒后自动关闭
                    anim: 2,
                    content: ['/et/monitor/init', 'no'], //iframe的url，no代表不显示滚动条
                    end: function () {
                        window.location.reload(true);
                    }
                });
            });
        });

        /**
         * 修改监控内容
         * @param personId 用户id
         */
        function editContent(personId) {
            layer.prompt({title: '输入新的监控内容，并确认', formType: 3}, function(text, index){
                $.post("/et/monitor/update/content",{"personId":personId,"content":text},function (data,status) {
                    if (status==="success"){
                        layer.close(index);
                        if (data.status>0){
                            layer.msg("监控内容修改成功",{icon:1},function () {
                                window.location.reload(true);
                            })
                        }else {
                            layer.msg("监控内容修改失败",{icon:2})
                        }
                    }else {
                        layer.msg("请求失败:"+status,{icon:2})
                    }
                },"json");
            });
        }

        /**
         * 是否启用监控
         * @param personId 用户id
         * @param state 状态
         */
        function changeState(personId,state) {
            let stateName=(state==0?"关闭提醒":"开启提醒");
            layer.confirm("确认"+stateName+"？", function(index){
                $.post("/et/monitor/update/"+state,{"personId":personId},function (data,status) {
                    if (status==="success"){
                        layer.close(index);
                        if (data.status>0){
                            layer.msg(stateName+"成功",{icon:1},function () {
                                window.location.reload(true);
                            })
                        }else {
                            layer.msg(stateName+"失败",{icon:2})
                        }
                    }else {
                        layer.msg("请求失败:"+status,{icon:2})
                    }
                },"json");
            });
        }

        function delRecord(personId) {
            layer.confirm("确认删除本条记录吗？", function(index){
                $.post("/et/monitor/del/"+personId,{},function (data,status) {
                    if (status==="success"){
                        layer.close(index);
                        if (data.status>0){
                            layer.msg("删除成功",{icon:1},function () {
                                window.location.reload(true);
                            })
                        }else {
                            layer.msg("删除失败",{icon:2})
                        }
                    }else {
                        layer.msg("请求失败:"+status,{icon:2})
                    }
                },"json");
            });
        }
    </script>
</div>
</body>
</html>